<template>
  <div class="app-container">

    <el-form label-width="120px">
      <el-form-item label="选择Excel">
        <el-upload
            ref="upload"
            :auto-upload="false"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError"
            :disabled="importBtnDisabled"
            :limit="1"
            :action="'http://localhost:8666'+'/serviceauto/automobile-category/addCategory'"
            name="file"
            accept=".xlsx">
          <el-button
              :loading="loading"
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload">上传到数据库
          </el-button>
        </el-upload>
      </el-form-item>


      <el-form-item label="上传视频">
        <!--        :on-success 上传成功方法-->
        <!--        :on-exceed 浏览器只能上传一个视频-->
        <!--        :on-remove 点击确认调用这个方法-->
        <!--        :before-remove 点击x调用这个方法-->
        <el-upload
            :on-success="handleVodUploadSuccess"
            :on-exceed="handleUploadExceed"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :file-list="fileList"
            :action="'http://localhost:8666'+'/vod/video/uploadVideo'"
            :limit="1"
            class="upload-demo">
          <el-button size="small" type="primary">上传视频</el-button>
          <el-tooltip placement="right-end">
            <div slot="content">最大支持1G，<br>
              支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
              GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
              MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
              SWF、TS、VOB、WMV、WEBM 等视频格式上传
            </div>
            <i class="el-icon-question"/>
          </el-tooltip>
        </el-upload>
      </el-form-item>

    </el-form>
  </div>

</template>

<script>

import VodVideo from "@/api/VodVideo";

export default {
  name: "ImportName",

  //data初始化值
  data() {
    return {
      fileList: [],
      video: {
        videoSourceId: '',
        videoOriginalName: ''
      },

      // BASE_API: process.env.BASE_API, // 接口API地址
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false
    }
  },
  //页面渲染前执行,一般调用methods
  created() {

  },
  //方法
  methods: {

    //点击按钮上传文件到接口里面
    submitUpload() {
      this.importBtnDisabled = true
      this.loading = true
      //  js: document.getElementById("upload").submit
      this.$refs.upload.submit()
    },
    //上传成功
    fileUploadSuccess() {
      //  提示信息
      this.loading = false

      this.$message({
        type: 'success',
        message: '添加课程分类成功'
      })
      //  跳转课程分类页面
      this.$router.push({path: '/table'})
    },
    //上传失败
    fileUploadError() {
      //  提示信息
      this.loading = false

      this.$message({
        type: 'error',
        message: '添加课程分类失败'
      })
    },

    //上传成功回调
    handleVodUploadSuccess(response, file, fileList) {
      this.video.videoSourceId = file.response.data.videoId
      this.video.videoOriginalName = file.name
      console.log(this.video.videoSourceId)
      console.log(this.video.videoOriginalName)
      console.log(file)
    },
//视图上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning('想要重新上传视频，请先删除已上传的视频')
    },
    //点击确定调用的方法
    handleVodRemove(file, fileList) {
      console.log(file)
      VodVideo.removeVideo(this.video.videoSourceId).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
      })
    },
    //点击x调用的方法
    beforeVodRemove(file, fileList) {
      return this.$confirm('确定移除' + file.name)
    },


  },

}
</script>

<style scoped>

</style>
